<template>
    <transition name="slide">
        <div class="modal" v-show="showModal">
            <!-- 遮罩 -->
            <div class="mask"></div>
            <!-- 对话框 -->
            <div class="dialog">
                <!-- 头部 -->
                <div class="dialog_header">
                    <span>{{title}}</span>
                    <a href="javascript:;" class="icon_close" @click="$emit('cancel')"></a>
                </div>
                <!-- 内容 -->
                <div class="dialog_body">
                    <!-- 使用slot -->
                    <slot name="body"></slot>
                    <slot name="hello"></slot>
                    <!-- <div>商品添加成功!</div> -->
                </div>
                <!-- 底部 -->
                <div class="dialog_footer">
                    <a href="javascript:;" v-if="btnType == 1" class="btn" @click="$emit('submit')">{{sureText}}</a>
                    <a href="javascript:;" v-if="btnType == 2" class="btn" @click="$emit('cancel')">{{cancelText}}</a>
                    <a href="javascript:;" v-if="btnType == 3" class="btn_group">
                        <a href="javascript:;" class="btn" @click="$emit('submit')">{{sureText}}</a>
                        <a href="javascript:;" class="btn" @click="$emit('cancel')">{{cancelText}}</a>
                    </a>
                    
                </div>   
            </div>
        </div>       
    </transition>

</template>

<script>
export default {
    //不规范
    // props:['showModal']
    //可以规范到传递进来的参数一定是Boolean，传递进来的是其他类型会报错
    props:{
        showModal:Boolean,
        title:String,
        btnType:String,
        sureText:{
            type:String,
            default:'确定'
        },
        cancelText:{
            type:String,
            default:'取消'
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/modal.scss';
</style>